<template>
    <div>
        <!-- 三级联动全局组件：已经注册为全局组件，因此不需要再引入，直接使用 -->
        <TypeNav/>
        <ListContainer/>
        <Recommend/>
        <Rank/>
        <Like/>
        <!-- :list="floor" 给子组件传递数据, list 为自定义名，floor 为值 -->
        <Floor v-for="(floor,index) in floorList" :key="floor.id" :list="floor"/>
        <Brand/>

    </div>
</template>

<script>
    // 引入其余的组件
    import ListContainer from '@/views/Home/ListContainer'
    import Recommend from '@/views/Home/Recommend'
    import Rank from '@/views/Home/Rank'
    import Like from '@/views/Home/Like'
    import Floor from '@/views/Home/Floor'
    import Brand from '@/views/Home/Brand'
    import {mapState} from 'vuex'

    export default {
        name: "",
        components: {
            ListContainer,
            Recommend,
            Rank,
            Like,
            Floor,
            Brand
        },
        computed: {
            ...mapState({
                floorList: state => state.home.floorList
            })

        },
        mounted() {
            // 派发 action , 获取 floor 组件的数据
            this.$store.dispatch("getFloorList");
            // 获取用户信息
            // this.$store.dispatch('getUserInfo'); // 改到前置路由导航中派发此 action src/router/index.js
        }
    }
</script>
<style scoped>
</style>
